@import 'common.sass'

.banner-container
    width: vw(750)
    height: vw(250)
    background-image: url("images/tech/banner.png")
    background-repeat: no-repeat
    background-size: vw(750) vw(250)

.introduction-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .title-box
        width: auto
        height: auto
        display: flex
        flex-direction: column
        align-items: center

        .english
            font-size: vw(18)
            color: $content_color

        .chinese
            font-size: vw(28)
            display: flex
            align-items: center
            color: $title_color

            .decoration
                width: vw(52)
                height: vw(15)
                background-image: url("images/index/title-decoration.png")
                background-repeat: no-repeat
                background-size: vw(52) vw(15)

            .text
                margin-left: vw(20)
                margin-right: vw(20)

    .content-box
        width: vw(700)
        height: auto
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        font-size: vw(24)
        line-height: vw(48)
        text-align: left
        text-indent: 2em
        word-break: break-all
        color: $title_color

.advantage-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .title-box
        width: auto
        height: auto
        display: flex
        flex-direction: column
        align-items: center

        .english
            font-size: vw(18)
            color: $content_color

        .chinese
            font-size: vw(28)
            display: flex
            align-items: center
            color: $title_color

            .decoration
                width: vw(52)
                height: vw(15)
                background-image: url("images/index/title-decoration.png")
                background-repeat: no-repeat
                background-size: vw(52) vw(15)

            .text
                margin-left: vw(20)
                margin-right: vw(20)

    .content-box
        width: vw(700)
        height: vw(360)
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        font-size: vw(24)
        line-height: vw(48)
        color: white

        .line
            width: vw(700)
            height: vw(120)
            display: flex
            justify-content: space-between

            .element
                width: vw(350)
                height: vw(120)
                display: flex
                flex-direction: column
                justify-content: center
                align-items: center
                background-color: $brand_main_color

            .element-dark
                width: vw(350)
                height: vw(120)
                display: flex
                flex-direction: column
                justify-content: center
                align-items: center
                background-color: #464b4d